import { ElLoading } from "element-plus";

/**
 * 内部：解析容器
 * @param {String|Element} container
 * @returns {Element|null}
 */
function resolveContainer(container) {
  if (!container) return null;
  if (typeof container === "string") return document.querySelector(container);
  if (container instanceof Element) return container;
  return null;
}

// loading 全局单例
let _loading = null;

export const baseLoading = (text = "加载中…", options = {}) => {
  console.log("🚀 ~ baseLoading ~ options:", options);
  // 获取容器
  if (options?.container) options.container = resolveContainer(options?.container);
  // 设置自定义 class
  let customClass = "toast-loading";
  // 若容器存在且样式为 static，则改为 relative（避免 loading 定位错误）
  if (options?.container && getComputedStyle(options.container).position === "static") {
    options.container.style.position = "relative";
  }
  // 若容器存在且为 Element，说明局部容器
  if (options.container instanceof Element) customClass += " toast-loading--dark";
  // 这里也用 _loading 保持“直接关闭”的体验（只维护一个）
  if (_loading) {
    _loading?.close();
    _loading = null;
  }

  _loading = ElLoading.service({
    target: options?.container || document.body,
    text,
    background: "transparent",
    customClass,
    ...options,
  });
  return _loading;
};

export const closeLoading = () => {
  if (_loading) {
    try {
      _loading.close();
    } catch {
      // 忽略关闭时的异常（loading 已经被销毁）
    }
    _loading = null;
  }
};

/**
 * Loading 加载提示
 * @method show 显示 loading
 * @method close 关闭 loading
 * @returns {Object} 返回一个 Loading 实例
 */
export const $loading = {
  show: (text, options) => baseLoading(text, options),
  close: () => closeLoading(),
};

/**
 * 作为插件全局挂载
 * @param {Object} app Vue 应用实例
 * @returns {void}
 */
export default {
  install(app) {
    // 挂载到 Vue 实例
    app.config.globalProperties.$loading = $loading;
    // 可选：挂到 window 方便在非组件场景快速用
    if (typeof window !== "undefined") {
      window.$loading = $loading;
    }
  },
};
